<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .form-group label {
            display: flex;
            justify-content: flex-end;
        }
        .title-cell {
            padding-left: 20px; 
            font-size: 1.2em; 
        }
        .captcha-code {
            background-color: #e6d0f5;
            color :blue;
            padding: 0px 10px;
            border-radius: 4px;
            margin: 0 10px;
            font-weight: bold;
            font-family: "黑体", sans-serif;
            font-style: italic;
            height: 1px;
        }
        .radio-group {
            display: flex;
            gap: 10px;
        }
    
    </style>
</head>
<body>
    <table>
        <tr>
            <td colspan="2" class="title-cell" style = "color: blue;"><b>欢迎注册会员</b></td>
        </tr>
        <tr>
            <td><b><label for="a">手机号码 ：</label></b></td>
            <td><input type = "text" id = "a" placeholder="11位手机号"></td>
            <td><span style="color:red;">必填</span></td>
        </tr>
        <tr>
            <td><b><label for="b">创建密码 ：</label></b></td>
            <td><input type = "password" id = "b" placeholder="8位密码"></td>
            <td><span style="color:red;">必填</span></td>
        </tr>
        <tr class="form-group">
            <td><b><label for="c">注册邮箱 ：</label></b></td>
            <td><input type = "password" id = "c" placeholder="例如:wustzz@sina.com"></td>
            <td><span style="color:red;">必填</span></td>
        </tr>
        <tr class="form-group">
            <td><b><label for="c">验证码 ：</label></b></td>
            <td><input type="text" id="c"></td>
            <td class="captcha-code" id="captchaDisplay">UJFg</td>
            <td><button type="button" class="refresh-btn" id="refreshBtn">↻</button></td>
        </tr>
        <script>
        // 获取DOM元素
        const refreshBtn = document.getElementById('refreshBtn');
        const captchaDisplay = document.getElementById('captchaDisplay');

        // 生成随机验证码的函数
        function generateCaptcha() {
            const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
            let captcha = "";
            for (let i = 0; i < 4; i++) {
                const randomIndex = Math.floor(Math.random() * chars.length);
                captcha += chars[randomIndex];
            }
            return captcha;
        }

        // 刷新验证码函数
        function refreshCaptcha() {
            captchaDisplay.textContent = generateCaptcha();
        }

        // 页面加载时生成初始验证码
        refreshCaptcha();

        // 点击按钮刷新验证码
        refreshBtn.addEventListener('click', refreshCaptcha);
    </script>
        <tr class="form-group">
            <td><b><label for="">性别 ：</label></b></td>
            <td class="radio-group">
                <input type="radio" name="sex" id = "d">
                <label for="d">男</label>
                <input type="radio" name="sex" id = "e">
                <label for="d">女</label>
            </td>     
        </tr>
        <tr class="form-group">
            <td><b><label for="f">生日 ：</label></b></td>
            <td><input type = "text" id = "f" value= "年 /月/日"></td>
        </tr>
        <tr class="form-group">
            <td><b><label for="g">年龄 ：</label></b></td>
            <td><input type = "text" id = "g"></td>
        </tr>
        <tr class="form-group">
            <td><b><label for="">籍贯 ：</label></b></td>
            <td>
                    <select  style="width:84px ;height:21px" >
                            <option selected="selected" >湖北省</option>
                            <option></option>
                    </select>
                    <select  style="width:84px ;height:21px">
                            <option selected="selected">武汉</option>
                            <option></option>
                    </select>
            </td>
        </tr>
        <tr>
            <td><b><label for="">个人学历 ：</label></b></td>
            <td>
                    <select   style="width:170px ;height:21px">
                            <option selected="selected">本科</option>
                            <option>专科</option>
                            <option>研究生</option> 
                            <option>博士</option>
                            <option>博士后</option>
                    </select>
                    
            </td>
        </tr>
        <tr class = "form-group">
            <td><b><label for="">月薪：</label></b></td>
            <td>
        <input
            type="range"
            id="score"
            name="score"
            min="0.0"
            max="10000"
            step="100"
            value="5000"
        />
        <span id="msg"></span>
        <script>
          var msg = document.getElementById("msg"); // 根据id值找到span元素
            window.onload = function () {
            msg.innerHTML = document.getElementById("score").value; // 获取区间域初始value值
            };
            document.getElementById("score").onchange = function () {
             msg.innerHTML = this.value; // 将当前区间域的value作为span元素的内容
            };
        </script>
            </td>
        </tr>
        <tr>
            <td><b><label for="">个人爱好 ：</label></b></td>
            <td>
                <input type="checkbox">唱歌
                <input type="checkbox">跑步
                <input type="checkbox">游泳
            </td>
        </tr>

    </table>
    <div>
            ​&nbsp;<b><label for="">个人照片 ：</b>
            <input type = "file" width="10px">
    </div>
    <table>
        <tr>
            <td>
                <b><label for="intro">个人简介 ：</label></b>
            </td>
            <td>
                <textarea id="intro" name="intro"  style="width: 200px; height: 200px;"></textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" value="提交">
                <input type="reset" value="重填">
            </td>
        </tr>
    </table>
</body>
</html>
